<template>
  <div class="main-container">
    <a-card class="layout-card">
      <template #title>
        <span style="font-weight: 700">评阅年份配置</span>
      </template>
      <a-form
        class="form"
        :model="addSubjectForm"
        name="basic"
        @submit="subFuncatio"
        ref="formRef"
        :rules="rules"
        title="年份配置"
      >
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="评阅年份" name="sysYear">
              <a-date-picker
                style="width: 100%"
                :disabled="setStater"
                format="YYYY"
                :locale="locale"
                placeholder="请设置年份:'2023'"
                v-model:value="addSubjectForm.sysYear"
                picker="year"
              />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-button type="primary" :loading="subloading" :disabled="setStater" html-type="submit">
              保存
            </a-button>
            <a-button type="" @click="setPageStale" style="margin-left: 30px">{{
              setStater ? '编辑' : '取消'
            }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, h } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
dayjs.locale('zh-cn')
import { setSysYear } from '/@/api/system-manage/teacher-info'

import { getsysYear } from '/@/api/sys/user'
import { seedSseConnection } from '/@/api/login'
import { useUserStore } from '/@/store/modules/user'
const userStore = useUserStore()
const userInfo: any = computed(() => userStore.getUserInfo)
const addSubjectForm = ref<any>({})
import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage, createConfirm } = useMessage()
const setStater = ref<Boolean>(true)
const subloading = ref<Boolean>(false)
const rules = {
  // sysYear: [{ required: true, message: '年份不能为空', trigger: 'blur' }],
}
/**
 * 编辑按钮点击事件
 */
const setPageStale = () => {
  setStater.value = !setStater.value
  getInfobox() //获取当前年份
}
const formRef = ref()
/**
 * 提交编辑结果
 */
const subFuncatio = async () => {
  formRef.value.validateFields().catch(err => {
    if (!err.errorFields.length) {
      let sysYear = dayjs(addSubjectForm.value.sysYear).format('YYYY')
      createConfirm({
        iconType: 'warning',
        title: () => h('span', '温馨提醒'),
        content: () =>
          h('span', '修改年份并提交保存后，其他在线用户将会被强制下线，是否开启编辑功能？'),

        onOk: () => {
          subloading.value = true
          setSysYear({ sysYear })
            .then((res: any) => {
              if (res.code == 200) {
                createMessage.success('修改年份成功')
                setStater.value = true
                userStore.setUserInfo({
                  ...userInfo.value,
                  kmYear: sysYear,
                })
                userStore.setInfo({
                  ...userInfo.value,
                  kmYear: sysYear,
                })
                // seedSseConnection({
                //   eventName: 'modifyYear',
                //   message: '修改了年份',
                //   allFlag: true,
                //   operateAccount: userInfo.value.account,
                // })
              } else {
                createMessage.error(res.message)
              }
            })
            .finally(() => {
              subloading.value = false
            })
        },
      })
    }
  })
}
/**
 * 获取当前年份结果
 * @param prames
 */
const getInfobox = async () => {
  let { code, message, data } = await getsysYear({})
  if (code == 200) {
    addSubjectForm.value.sysYear = dayjs(data + '', 'YYYY')
  } else {
    createMessage.error(message)
  }
  subloading.value = false
}

onMounted(() => {
  getInfobox()
})
</script>

<style lang="less" scoped>
.main-container {
  // height: @c_height;
  .layout-card {
    height: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
  }
}
</style>
